<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>历史记录</title>
</head>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<link rel="stylesheet"
	href="./resources/css/sweetalert2.css" />
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="./resources/js/jquery.min.js"></script>
<script src="./resources/js/sweetalert2.min.js"></script>
<body>
<div id="mainApp">
  <el-container style="padding-top:20px;">
	  <el-header style="heighe:10px;">
		  <el-row :gutter="24">
			<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
				<el-breadcrumb class="breadcrumb-inner">
					<el-breadcrumb-item><h2>历史记录</h2></el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
		  </el-row>
	  </el-header>
	  <el-main>
	  	  <el-card calss="box-card">
	  	  	<el-row :gutter="24">
		  		<el-col :span="8" :xs="8" :sm="8" :md="8" :lg="8">
		  			<span><h4>历史记录</h4></span>
		  		</el-col>
		  	</el-row>
		  </el-card>
		  <el-card calss="box-card" style="margin-top:20px">
			  <el-row style="overflow-x:hidden;">
		  		<template>
				  <el-table :data="tableData" style="width:980%;margin:15px auto">
				    <el-table-column prop="processInstanceId" label="流程ID" >
				    </el-table-column>
				    <el-table-column prop="userId" label="用户ID" >
				    </el-table-column>
				    <el-table-column prop="reason" label="原因" >
				    </el-table-column>
				    <el-table-column prop="zt" label="状态" >
				    	<template slot-scope="scope">
				    		<el-tag type="success" v-if="scope.row.zt==true "><span>已办结</span></el-tag>
				    		<el-tag type="info" v-else><span>在办</span></el-tag>
				    	</template>
				    </el-table-column>
				    <el-table-column label="操作" >
				    	<template slot-scope="scope">
				    		 <el-button type="primary" @click="handelDetails(scope.row)">详情</el-button>
				    	</template>
				    </el-table-column>
				    <el-table-column label="操作" >
				    	<template slot-scope="scope">
				    		 <el-button type="primary" @click="showPng(scope.row)">流程图</el-button>
				    	</template>
				    </el-table-column>
				  </el-table>
			  	</template>
			  </el-row>
		  </el-card>
	  </el-main>
  </el-container>
  <el-dialog title="申请历史" :visible.sync="dialogFormVisible">
  		<el-table :data="hisTable" style="width:980%;margin:15px auto">
		    <el-table-column prop="activityName" label="节点名称" >
		    </el-table-column>
		    <el-table-column prop="userId" label="用户ID" >
		    </el-table-column>
		    <el-table-column prop="startTime" label="节点开始时间" >
		    </el-table-column>
		    <el-table-column prop="endTime" label="节点结束时间" >
		    </el-table-column>
		     <el-table-column prop="taskId" label="审批任务ID" >
		    </el-table-column>
		    <el-table-column prop="approvalFlag" label="审批结果" >
		    	<template slot-scope="scope">
				    <el-tag type="primary" v-if="scope.row.approvalFlag==true ">通过</el-tag>
				    <el-tag type="warning" v-if="scope.row.approvalFlag==false ">不通过</el-tag>
				 </template> 
		    </el-table-column>
		</el-table>
 </el-dialog>
 
 <el-dialog title="流程跟踪" :visible.sync="dialogPicVisible">
  		<img :src="picData" alt="">
 </el-dialog>
</div>
</body>
<script>
new Vue({
		el:"#mainApp",
	    data:{
	    	tableData: [],
	    	dialogFormVisible:false,
	    	dialogPicVisible:false,
	    	appFlag:"",
	    	row:"",
	    	hisTable:[],
	    	picData:""
	    },
	    mounted:function(){
	    	this.queryApplyData();
	    },
	    methods: {
	      queryApplyData(){
			  var _this = this;
			  $.get("appro/queryApplyData").then(data=>{
				  console.log(data);
				  _this.tableData = data;
	    	  },response=>{
	    		  alert(response.responseJSON.message);
	    	  });
		  },
		  handelDetails(row){
			  $.get("appro/queryHistoryTask",{
				  processInstanceId:row.processInstanceId
			  }).then(data=>{
				  this.dialogFormVisible = true;
				  this.hisTable = data;
	    	  },response=>{
	    		  swal(response.responseJSON.message);
	    	  });
		  },
		  showPng(row){
			  $.get("appro/getProcessImage/"+row.processInstanceId,{
				  processInstanceId:row.processInstanceId
			  }).then(data=>{
				  this.dialogPicVisible = true;
				  this.picData = data;
	    	  },response=>{
	    		  swal(response.responseJSON.message);
	    	  }); 
		  }
	    }
	  });
</script>
</html>